<!-- home -->
<template>
  <div id="donkeyJump">
          <!-- 预备界面 -->
          <div id="gameCover" class="block background">
            <!-- 声音控制按钮 -->
            <a href="javascript:void(0)" id="btnSound" class="icon">&nbsp;</a>
            <!-- 成就 -->
            <a href="javascript:void(0)" id="btnCup" class="icon">&nbsp;</a>
            <!-- 排行榜 -->
            <a href="javascript:void(0)" id="btnScore" class="icon">&nbsp;</a>
            <!-- 开始 -->
            <a href="javascript:void(0)" id="btnPlay" class="icon">&nbsp;</a>
            <!-- 更多 -->
            <a href="javascript:void(0)" id="btnMore" class="icon">&nbsp;</a>
            <!-- 分享 -->
            <a href="javascript:void(0)" id="btnShare" class="icon">&nbsp;</a>
            <!-- 加载资源 -->
            <span id="progressText"></span>
          </div>
          <!-- 游戏主体 -->
          <div id="gameBody" class="block">
            <div id="gameCanvas" class="block">
              <!-- 天空背景层 -->
              <canvas width="480" height="800" id="canvasSkyLayer"></canvas>
              <!-- 远景山丘背景层 -->
              <canvas width="480" height="800" id="canvasHillLayer"></canvas>
              <!-- 近景山丘背景层 -->
              <canvas width="480" height="800" id="canvasHillNearLayer"></canvas>
              <!-- 房子背景层 -->
              <canvas width="480" height="800" id="canvasFloorLayer"></canvas>
              <!-- 白云精灵层 -->
              <canvas width="480" height="800" id="canvasStairLayer"></canvas>
              <!-- 驴子精灵层 -->
              <canvas width="480" height="800" id="canvasDonkeyLayer"></canvas>
              <!-- 效果精灵层 -->
              <canvas width="480" height="800" id="canvasEffectLayer"></canvas>
            </div>
            <!-- 分数及暂停按钮 -->
            <div id="numberAndPause" class="block">
              <!-- 分数 -->
              <div id="number" class="icon"></div>
              <!-- 暂停 -->
              <a href="javascript:void(0)" id="btnPause" class="icon">&nbsp;</a>
            </div>
            <!-- 预备 -->
            <div id="beingReady" class="icon">
              &nbsp;
            </div>
            <!-- 开始 -->
            <div id="beingGo" class="icon">
              &nbsp;
            </div>
            <div class="kjian">
            <img src="images/prev.png">
            </div>
            <div class="kjian2">
            <img src="images/next.png">
            </div>
            <!-- 暂停面板 -->
            <div id="panelResume" class="icon">
              <!-- 返回列表 -->
              <a href="javascript:void(0)" id="btnResumeExit">&nbsp;</a>
              <!-- 继续游戏 -->
              <a href="javascript:void(0)" id="btnResume">&nbsp;</a>
            </div>
          </div>
          <!-- 游戏结束 -->
          <div id="gameOver" class="block background">
            <!-- 分享 -->
            <a href="javascript:void(0)" id="btnShare2" class="icon">&nbsp;</a>
            <!-- 名字 -->
            <span id="name"></span>
            <!-- 得分 -->
            <span id="score"></span>
            <!-- 排行榜 -->
            <a href="javascript:void(0)" id="btnScore2" class="icon">&nbsp;</a>
            <!-- 准备 -->
            <a href="javascript:void(0)" id="btnRetry" class="icon">&nbsp;</a>
            <!-- 更多 -->
            <a href="javascript:void(0)" id="btnMore2" class="icon">&nbsp;</a>
            <!-- 成就 -->
            <a href="javascript:void(0)" id="btnCup2" class="icon">&nbsp;</a>
          </div>
        </div>
</template>
<script>
  require('./myEngine/core/my.js')
  require('./myEngine/component/Component.js')
  require('./myEngine/component/DisplayObject.js')
  require('./myEngine/component/DisplayObjectContainer.js')
  require('./myEngine/component/Bitmap.js')
  require('./myEngine/component/Animation.js')
  require('./myEngine/component/Sprite.js')
  require('./myEngine/component/Viewport.js')
  require('./myEngine/component/Layer.js')
  require('./myEngine/component/Game.js')
  require('./myEngine/event/KeyEvent.js')
  require('./myEngine/utils/ImageManager.js')
  require('./myEngine/utils/DOM.js')
  require('./myEngine/utils/Math.js')
  const { buzz } = require('./myEngine/utils/buzz.js')
  const { getImageRes } = require('./js/resources/images.js')
  require('./js/resources/audios.js')
  require('./js/frames/prop.js')
  require('./js/frames/stair.js')
  require('./js/frames/donkey.js')
  require('./js/frames/effect.js')
  require('./js/classes/Prop.js')
  require('./js/classes/Stair.js')
  require('./js/classes/Cloud.js')
  require('./js/classes/Donkey.js')
  require('./js/classes/DonkeyJump.js')
  require('./js/classes/UI.js')
  require('./js/classes/Audio.js')
  // require('./js/main.js')

export default {
  components: {},
  data() {
    return {
      imageResources: []
    }
  },
  computed: {},

  mounted() {
    this.imageResources = getImageRes();
    my.ImageManager.load(this.imageResources, this.loadImageResources);
  },

  methods: {
    loadImageResources(number) {
      console.log(number)
        my.DOM.get('progressText').innerHTML = '正在加载图片...(' + ~~(number / this.imageResources.length * 100) + '%)';
        // if(number < this.imageResources.length) {
        //     return false;
        // }
        my.DOM.remove(my.DOM.get('progressText'));
        this.init();
        // if(!buzz.isOGGSupported() && !buzz.isMP3Supported()) {
        //     my.DOM.remove(my.DOM.get('progressText'));
        //     this.init();
        // } else {
        //     loadAudioResources();
        // }
    },
    loadAudioResources(number) {
        var res = getAudioRes(), len = res.length;
        var group = [], item, a;

        for(var i = 0; i < len; i++) {
            item = res[i];
            a = new buzz.sound(item.src, {
                formats : ['wav', 'mp3'],
                preload : true,
                autoload : true,
                loop : !!item.loop
            });

            group.push(a);
            Audio.list[item.id] = a;
        }

        var buzzGroup = new buzz.group(group);
        var number = 1;

        buzzGroup.bind('loadeddata', function(e) {
            my.DOM.get('progressText').innerHTML = '正在加载音乐...(' + ~~(number / len * 100) + '%)';

            if(number >= len) {
                my.DOM.remove(my.DOM.get('progressText'));
                init();
            } else {
                number++;
            }
        });
    },
    init() {
        Audio.play('ogg_background');
        // 创建游戏对象
        var donkeyJump = new DonkeyJump();
        donkeyJump.setFPS(60);
        donkeyJump.init();
        var ui = donkeyJump.ui;

        // 开始游戏时
        donkeyJump.onstart = function() {
            my.KeyEvent.addListener();
        }
		
        // 游戏状态更新
        donkeyJump.onupdate = function() {
          
            if(my.KeyEvent.check('VK_LEFT') || my.KeyEvent.check('A')) {
                donkeyJump.keyDownLeft = true;
            } else {
                donkeyJump.keyDownLeft = false;
            }

            if(my.KeyEvent.check('VK_RIGHT') || my.KeyEvent.check('D')) {
                donkeyJump.keyDownRight = true;
            } else {
                donkeyJump.keyDownRight = false;
            }
        }
        // 停止游戏时
        donkeyJump.onstop = function() {
            my.KeyEvent.removeListener();
        }
        // 点击开始按钮
        ui.onplay = function() {
            this.toBody();
            donkeyJump.stateInit();
            donkeyJump.start();
        }
        // 打开声音
        ui.onsoundopen = function() {
            Audio.mute = false;
            Audio.play('ogg_background', true);
        }
        // 关闭声音
        ui.onsoundclose = function() {
            Audio.mute = true;
            Audio.pauseAll();
        }
        // 暂停
        ui.onpause = function() {
            donkeyJump.pause();
            ui.panelResumeVisible(true);
            ui.btnPauseVisible(false);
        }
        // 返回列表
        ui.onresumeexit = function() {
            ui.toCover();
            ui.panelResumeVisible(false);
            Audio.play('ogg_background');
        }
        // 继续游戏
        ui.onresume = function() {
            ui.panelResumeVisible(false);
            ui.btnPauseVisible(true);
            donkeyJump.start();
            Audio.play('ogg_background', true);
        }
        // 未实现
        ui.onshowcup = ui.onshowcore = ui.onshowmore = ui.onshare = function() {
            alert('本游戏仅供学习,游戏中的图片和音乐均来自原游戏《驴子跳》！\n联系作者：<御剑神兵> yujianshenbing@163.com');
        }
    }
  }
}
</script>
<style lang="scss" scoped>
@import './css/main.css';
</style>
